<!-- Button -->
<template>
  <el-button :style="{color: butTextColor}" @click="handleButton" :type="type" :loading="loading" :size="size" :icon="icon">
    <slot></slot>
  </el-button>
</template>
<script>
export default {
  name: 'Button',
  data () {
    return {
      types: '',
      loading: false,
      butTextColor: '',
      colorList: [
        { value: 'primary', color: 'rgba(0, 153, 229, .7)' },
        { value: 'suceess', color: '#67C23A' },
        { value: 'danger', color: '#F56C6C' },
        { value: 'warning', color: '#E6A23C' },
        { value: 'info', color: '#909399' },
        { value: 'yellow', color: 'rgba(255, 255, 0, 1)' }
      ]
    }
  },
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    color: {
      // color
      type: String,
      default: ''
    },
    btnloading: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    icon: {
      type: String,
      default: ''
    }
  },
  watch: {
    'btnloading': function (val) {
      this.loading = val
    }
  },
  created () {
    this.returnColor()
  },
  methods: {
    handleButton () {
      if (this.loading) return
      this.$emit('click')
    },
    returnColor () {
      let str = this.color
      this.colorList.forEach(item => {
        if (item.value === this.color) {
          str = item.color
        }
      })
      this.butTextColor = str
    }
  }
}

</script>
